<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>数据导入</title>
		<script src="../js/mui.min.js"></script>
		<script src="../js/echarts.min.js"></script>
		<script src="../js/base64.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">数据导入</h1>
		</header>
		<div class="mui-content">
			<p style="margin-top:20px;margin-left: 20px;">通过数据导入监测记录</p>
			
			<div class="mui-content-padded">
				<div class="mui-input-row">
					<label>图表数据</label>
					<input type="text" class="mui-input-clear" id="sheetDataArea" placeholder="图表数据粘贴处">
				</div>
			</div>
			
			<div class="mui-button-row">
				<button type="button" onclick="generateSheet();" class="mui-btn mui-btn-primary" >生成图表</button>
			</div>
			
			<div class="mui-content-padded">
				<div class="chart" id="xueyaChart"></div>
			</div>
			<div class="mui-content-padded">
				<div class="chart" id="xinlvChart"></div>
			</div>
			<div class="mui-content-padded">
				<div class="chart" id="maiboChart"></div>
			</div>
			<div class="mui-content-padded">
				<div class="chart" id="tiwenChart"></div>
			</div>
			
			<div style="height:44px;"></div>
		</div>
		
		
		
		<script>
			mui.init();
			
			function generateSheet(){
				var chartOption = new Array();
				var sheetData = JSON.parse(Base64.decode(document.getElementById('sheetDataArea').value));
				chartOption[0] = {
					title: {
						text: '血压变化',
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data:['收缩压','舒张压']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: sheetData.queryUserTimestep
					},
					yAxis: {
						type: 'value',
						min: 40
					},
					series: [
						{
							name:'收缩压',
							type:'line',
							itemStyle: {
								color: '#c23531'
							},
							markLine: {
								data: [
									{
										name: '正常最高收缩压',
										yAxis: 139
									},
									{
										name: '正常最低收缩压',
										yAxis: 90
									}
								]
							},
							data:sheetData.queryUserXueya1
						},
						{
							name:'舒张压',
							type:'line',
							itemStyle: {
								color: '#91c7ae'
							},
							markLine: {
								data: [
									{
										name: '正常最高舒张压',
										yAxis: 89
									},
									{
										name: '正常最低舒张压',
										yAxis: 60
									}
								]
							},
							data:sheetData.queryUserXueya2
						}
					]
				};
				chartOption[1] = {
					title: {
						text: '心率变化',
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data:['心率']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: sheetData.queryUserTimestep
					},
					yAxis: {
						type: 'value',
						min: 40
					},
					series: [
						{
							name:'心率',
							type:'line',
							itemStyle: {
								color: '#2f4554'
							},
							markLine: {
								data: [
									{
										name: '正常最高心率',
										yAxis: 100
									},
									{
										name: '正常最低心率',
										yAxis: 60
									}
								]
							},
							data:sheetData.queryUserXinlv
						}
					]
				};
				chartOption[2] = {
					title: {
						text: '脉搏变化',
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data:['脉搏']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: sheetData.queryUserTimestep
					},
					yAxis: {
						type: 'value',
						min: 40
					},
					series: [
						{
							name:'脉搏',
							type:'line',
							itemStyle: {
								color: '#61a0a8'
							},
							markLine: {
								data: [
									{
										name: '正常最高脉搏',
										yAxis: 100
									},
									{
										name: '正常最低脉搏',
										yAxis: 60
									}
								]
							},
							data:sheetData.queryUserMaibo
						}
					]
				};
				chartOption[3] = {
					title: {
						text: '体温变化',
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data:['体温']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: sheetData.queryUserTimestep
					},
					yAxis: {
						type: 'value',
						min: 34,
						axisLabel: {
							formatter: '{value} °C'
						}
					},
					series: [
						{
							name:'体温',
							type:'line',
							itemStyle: {
								color: '#d48265'
							},
							markLine: {
								data: [
									{
										name: '正常最高体温',
										yAxis: 37
									},
									{
										name: '正常最低体温',
										yAxis: 35.9
									}
								]
							},
							data:sheetData.queryUserTiwen
						}
					]
				};
				echarts.init(document.getElementById('xueyaChart')).setOption(chartOption[0]);
				echarts.init(document.getElementById('xinlvChart')).setOption(chartOption[1]);
				echarts.init(document.getElementById('maiboChart')).setOption(chartOption[2]);
				echarts.init(document.getElementById('tiwenChart')).setOption(chartOption[3]);
			}
			
			

		</script>
	</body>
</html>
